<template>
	<view class="page">

		<custom-navigation :title="!isRecharge?'全部会员':'选择会员充值'" rightImg="/static/add.png"
			@rightAction="$navigateTo('/pages/vip/vip-add')">
		</custom-navigation>

		<view class="flex-row-center"
			style="background-color: #38C09EFF;padding-top: 20rpx;padding-left: 24rpx;padding-right: 24rpx;padding-bottom: 22rpx;">
			<view class="search-box flex-row-center">
				<image src="/static/search.png"></image>
				<input placeholder="请输入会员手机号/姓名" placeholder-style="color:#999999" v-model="searchStr"
					@confirm="doSearch" confirm-type="search" type="text"    @keydown.enter="doSearch" />
				<!-- <image src="../../static/qrcode.png" class="qrimag" @click.stop="qrcodeSearch"></image> -->
			</view>
			<!-- 			<view class="fliter-box" @click="showPicker=true">
				<image src="/static/filter.png"></image>
				<text>筛选</text>
			</view> -->
		</view>

		<scroll-view class="body-scroll" scroll-y="true" @scrolltolower="loadMoreData">
			<view class="item-view flex-row-center" v-for="(item,index) in datas" @click="itemOnClick(item)">
				<image :src="item.head_images||'/static/default_head.png'" class="head-img"></image>
				<view class="flex-column" style="margin-left: 40rpx; flex: 1;">
					<view class="flex-row-center">
						<view class="name">{{item.member_name}}</view>
						<view :class="item.member_state=='生效'?'state':'unstate'">{{item.member_state=="生效"?'已激活':item.member_state}}
						</view>
					</view>
					<view class="flex-row-center" style="margin-top: 8rpx;">
						<view class="phone">{{item.openEye?item.member_phone:item.hide_member_phone}}</view>
						<image :src="item.openEye?'/static/open_eye.png':'/static/clonse_eye.png'" class="eye"
							@click.stop="itemOpenEye(item)"></image>
					</view>
					<view class="flex-row-center" style="margin-top: 10rpx;">
						<view class="amount">余额￥{{item.balance}}</view>
						<view class="integral">积分{{item.integral}}</view>
					</view>
				</view>

				<image src="../../static/arrow-blackmin.png" class="arror-right"></image>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import dsBridge from 'dsbridge'
	export default {
		data() {
			return {
				datas: [],
				page: 1,
				searchStr: '',
				isRecharge: false,
				isSelect: false
			}

		},
		onLoad(options) {
			this.isRecharge = options?.isRecharge ?? false
			this.isSelect = options?.isSelect ?? false
			this.getData()
		},
		onShow() {
			if (uni.getStorageSync("refresh")) {
				uni.setStorageSync("refresh", null)
				this.page = 1;
				this.getData()

			}
		},
		methods: {
			qrcodeSearch() {
				// this.searchStr="1524";
				// this.page=1;
				// this.getData()
				let ths = this;
				dsBridge.call("QRCode", {}, function(res) {
					if (res) {
						ths.searchStr = res
						ths.page = 1
						ths.getData()
					}
				})
			},

			itemOpenEye(item) {
				item.openEye = !(item.openEye ?? false)
				this.$forceUpdate()
			},
			itemOnClick(item) {
				if (this.isSelect) {
					dsBridge.call("JsCallBack", {
						"action": "vip-list",
						"data": item
					}, function(res) {

					})
					uni.setStorageSync("vip-list",[item])
					uni.navigateBack()
					return;
				}

				if (this.isRecharge) {
					let info = JSON.stringify(item)
					uni.setStorageSync("vip-user", info)
					this.$navigateTo('/pages/vip/recharge')
				} else
					this.$navigateTo('/pages/vip/vip-detail?id=' + item.id)
			},
			doSearch() {
				this.page=1;
				this.getData()
			},
			loadMoreData() {
				this.page++;
				this.getData()
			},
			getData() {
				let relation_condition = {};

				if (this.searchStr.length > 0) {
					relation_condition = {
						"data": [{
							"relation": "OR",
							"data": [{
								"colName": "member_name",
								"ruleType": "[like]",
								"value": this.searchStr
							}, {
								"colName": "member_phone",
								"ruleType": "[like]",
								"value": this.searchStr
							}]
						}],
						"relation": "AND"
					}
				}
				uni.showLoading({
					title: "加载中..."
				})


				this.$apiPost("/retail/select/srvretail_member_info_noencryption_select", {
					"serviceName": "srvretail_member_info_noencryption_select",
					"colNames": ["*"],
					"condition": [],
					"relation_condition": relation_condition,
					"page": {
						"rownumber": 20,
						"pageNo": this.page
					}
				}).then(res => {
					var token = dsBridge.call("getToken");
					if (token == '' || token == undefined) {
						token = uni.getStorageSync("token") ?? ''
					}
					if (res.data != null && res.data.length > 0) {
						for (let i in res.data) {
							let item = res.data[i]
							if (item.head_portrait) {
								if (item.head_portrait.length > 20)
									item.head_images = item.head_portrait;
								else
									item.head_images =
									`http://139.196.209.46:4882/file/download?fileNo=${item.head_portrait}&bx_auth_ticket=${token}`

							}
							if (item.member_phone?.length == 11) {
								let s = "" + item.member_phone;
								let sli = s.split("");
								sli.splice(4, 4, "***");
								item.hide_member_phone = sli.join("")
							}
						}
					}

					if (this.page == 1)
						this.datas = res.data;
					else {
						if (res.data.length == 0) {
							uni.showToast({
								title: "没有更多数据了。",
								icon: 'none'
							})
						}
						this.datas.push(...res.data)
					}

					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fliter-box {
		margin-right: 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 40rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}

	.search-box {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 39rpx;

		}

		input {
			flex: 1;
			font-size: 14px;
			font-weight: 500;
			margin-left: 8rpx;
			color: #000;
		}

		.qrimag {
			width: 52rpx;
			height: 52rpx;
			margin-right: 40rpx;
		}
	}

	.tab-box {
		height: 100rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		justify-content: center;
		padding-left: 72rpx;
		padding-right: 72rpx;

		.item {
			padding-top: 32rpx;
			flex: 1;

			.bubble {

				min-width: 24rpx;
				height: 24rpx;
				background: rgba(212, 48, 48, 1);
				color: white;
				font-size: 20rpx;
				line-height: 24rpx;
				border-radius: 12rpx;
				font-weight: 500;
				text-align: center;
				top: -13rpx;
				right: -20rpx;
				position: absolute;

			}

			.unchecktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			.checktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
			}

			.in {
				margin-top: 4rpx;
				width: 48rpx;
				height: 6rpx;
				background-color: rgba(56, 192, 158, 1);
				;
				border-radius: 3rpx;
			}
		}
	}

	.item-view {
		padding: 24rpx;
		width: 698rpx;
		margin-left: 26rpx;
		margin-top: 32rpx;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 1);

		.head-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
		}

		.name {
			font-size: 32rpx;
			font-weight: 700;
			margin-right: 8rpx;
		}

		.state {
			padding: 0 8rpx;
			line-height: 30rpx;
			height: 30rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(56, 192, 158, 1);
			font-size: 20rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.unstate {
			width: 74rpx;
			line-height: 30rpx;
			height: 30rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(212, 48, 48, 1);
			font-size: 20rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}


		.phone {
			font-size: 30rpx;
			font-weight: 500;
		}

		.eye {
			width: 32rpx;
			height: 32rpx;
			margin-left: 18rpx;
		}

		.amount {
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}

		.integral {
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.arror-right {
			width: 12rpx;
			height: 24rpx;
		}

		.bluebtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(56, 192, 158, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.redbtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(212, 48, 48, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}

	}
</style>
